{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab-content">
            <form id="formData" class="layui-form layui-form-pane" autocomplete="off">
                <div class="layui-form-item">
                    <label class="layui-form-label">站点信息</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="{$info.name}" class="layui-input" placeholder="请输入站点名称">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">站点LOGO</label>
                    <div class="layui-input-block">
                        <div class="upload-frame {notempty name='info.logo'}upload-btn-hide{/notempty}" id="uploadLogo">
                            <i class="layui-icon layui-icon-addition"></i>
                        </div>
                        <div class="preview-box">
                            <div class="uploader-list" id="logoImg">
                                {notempty name="info.logo"}
                                <div class="file-items">
                                    <div class="handle" data-flag="logo"><i class="layui-icon layui-icon-delete"></i></div>
                                    <img src="{$info.logo}">
                                    <input type="hidden" value="logo">
                                </div>
                                {/notempty}
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="logo" id="logo" value="{$info.logo}">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">底部LOGO</label>
                    <div class="layui-input-block">
                        <div class="upload-frame {notempty name='info.logo_while'}upload-btn-hide{/notempty}" id="uploadLogoWhile">
                            <i class="layui-icon layui-icon-addition"></i>
                        </div>
                        <div class="preview-box">
                            <div class="uploader-list" id="logoWhileImg">
                                {notempty name="info.logo_while"}
                                <div class="file-items">
                                    <div class="handle" data-flag="logo_white"><i class="layui-icon layui-icon-delete"></i></div>
                                    <img src="{$info.logo_while}">
                                    <input type="hidden" value="logo_white">
                                </div>
                                {/notempty}
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="logo_while" id="whileLogo" value="{$info.logo_while}">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">浏览器图标</label>
                    <div class="layui-input-block">
                        <div class="upload-frame {notempty name='info.favicon'}upload-btn-hide{/notempty}" id="uploadFavicon">
                            <i class="layui-icon layui-icon-addition"></i>
                        </div>
                        <div class="preview-box">
                            <div class="uploader-list" id="faviconImg">
                                {notempty name="info.favicon"}
                                <div class="file-items">
                                    <div class="handle" data-flag="favicon"><i class="layui-icon layui-icon-delete"></i></div>
                                    <img src="{$info.favicon}">
                                    <input type="hidden" value="favicon">
                                </div>
                                {/notempty}
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="favicon" id="favicon" value="{$info.favicon}">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">站点关键词</label>
                    <div class="layui-input-block">
                        <input type="text" name="keywords" value="{$info.keywords}" class="layui-input" placeholder="请输入站点关键词">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">站点描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="description" value="{$info.description}" class="layui-input" placeholder="请输入站点描述">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">统计代码</label>
                    <div class="layui-input-block">
                        <textarea name="statistical_code" placeholder="网站第三方统计代码(Google、Baidu等)" class="layui-textarea">{$info.statistical_code}</textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">版权信息</label>
                    <div class="layui-input-block">
                        <input type="text" name="copyright" value="{$info.copyright}" class="layui-input" placeholder="请输入底部版权信息">
                    </div>
                </div>

                <div class="btn-block">
                    <button type="button" lay-submit lay-filter="sendForm" class="layui-btn layui-btn-normal"><i class="fa fa-check"></i>提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i>重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="custom"}

{/block}

{block name="js"}
<script>
    layui.use(['form','upload'],function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload;

        // Logo
        uploadTemplate('#uploadLogo','#logoImg','#logo','logo','logoLoad')

        // Logo2
        uploadTemplate('#uploadLogoWhile','#logoWhileImg','#whileLogo','logo_white','logoTwoLoad')

        //favicon
        upload.render({
            elem:"#uploadFavicon",
            url:"{:url('site/faviconUpload')}",
            multiple:false,
            accept:'file',//允许上传的文件类型
            acceptMime:'image/ico',
            exts:'ico',
            size:uploadFileSize,
            before:function (obj) {
                $('#uploadFavicon').addClass('upload-btn-hide')
                $('#faviconImg').empty()
                faviconLoad = layer.load(1, {shade: [0.5, '#FFF'], time: 0})//弹出遮罩层
            }
            ,done:function (res) {
                layer.close(faviconLoad)//关闭遮罩层
                sucMsg(res.msg)
                $("#faviconImg").append(
                    '<div class="file-items">' +
                    '<div class="handle" data-flag="favicon" data-path="' + res.url + '"><i class="layui-icon layui-icon-delete"></i></div>' +
                    '<img class="cover-preview" src="' + res.url + '">' +
                    '</div>'
                )

                //隐藏域赋值
                $("#favicon").val(res.url)
            }
        })

        function uploadTemplate(btn,preview,value,flag,load){
            upload.render({
                elem: btn,
                url: "{:url('site/upload')}",
                multiple: false,
                accept: 'file',
                size: uploadFileSize,
                acceptMime: uploadImgExt,
                before: function (obj) {
                    $(btn).addClass('upload-btn-hide')
                    $(preview).empty()
                    load = layer.load(1, {shade: [0.5, '#FFF'], time: 0})//弹出遮罩层
                },
                done: function (res) {
                    layer.close(load)//关闭遮罩层
                    sucMsg(res.msg)
                    if (res.code == 'suc') {
                        $(preview).append(
                            '<div class="file-items">' +
                            '<div class="handle" data-flag="'+flag+'" data-path="' + res.url + '"><i class="layui-icon layui-icon-delete"></i></div>' +
                            '<img class="cover-preview" src="' + res.url + '">' +
                            '</div>'
                        );

                        $(value).val(res.url)
                    } else {
                        $(btn).removeClass('upload-btn-hide')
                    }
                }
            })
        }

        //删除图片
        $(document).on("click", ".file-items .handle", function (event) {
            //标记
            let flag = $(this).attr('data-flag')

            if (flag == 'logo') {
                $('#uploadLogo').removeClass('upload-btn-hide')//显示上传按钮
                $("#logo").val("")
            } else if (flag == 'logo_white') {
                $('#uploadLogoWhile').removeClass('upload-btn-hide')//显示上传按钮
                $("#whileLogo").val("")
            } else if (flag == 'favicon') {
                $('#uploadFavicon').removeClass('upload-btn-hide')//显示上传按钮
                $("#favicon").val("")
            }

            $(this).parent().remove();
        })

        form.on('submit(sendForm)',function (obj) {
            $.ajax({
                type:"POST",
                data:obj.field,
                url:"{:url('site/edit')}",
                dataType:"JSON",
                success:function (res) {
                    if (res.code == 'suc'){
                        sucMsg(res.msg)
                    } else {
                        errMsg(res.msg)
                    }
                }
            })
        })
    });
</script>
{/block}